<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>CTP4 Grid Example</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/menus/ctp.ui.menus.js"></script>
		<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js"></script>
		<script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js"></script> 
		<script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js"></script>  
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">        </script>
        <script type="text/javascript" src="../../js/ctp/datepicker/ctp.ui.datepicker.js"></script>	
                 

		<script type="text/javascript" language="javascript" src="../../js/ctp/grid/jquery.jeditable.js"></script>
        <link rel="stylesheet" type="text/css" href="../../css/grid.css" />
		<link rel="stylesheet" type="text/css" href="../../css/menus.css" />
		<link rel="stylesheet" type="text/css" href="../../css/checkbox.css" />
		<link rel="stylesheet" type="text/css" href="../../css/combobox.css" />
		<link rel="stylesheet" type="text/css" href="../../css/panel.css" />
		<link rel="stylesheet" type="text/css" href="../../css/toolbar.css" />
		<link rel="stylesheet" type="text/css" href="../../css/button.css" />
        <link rel="stylesheet" type="text/css" href="../../css/jquery/jquery-ui-1.8.custom.css" />
		<link href="../../css/jquery/ui.core.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/jquery/ui.datepicker.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/jquery/ui.theme.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/datepicker.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript">
            Namespace.path = "../../js/";
            Namespace.include(["jqueryui/jquery-ui.js"]);
            Namespace.include(["ctp/menus/ctp.ui.menus.js","ctp/panel/ctp.ui.panel.js","ctp/toolbar/ctp.ui.toolbar.js","ctp/grid/ctp.ui.grid_g.js","ctp/checkbox/ctp.ui.checkbox.js"]);
            //ctp.core.log.lvl = ctp.core.loglvl.obj;
            /*try {
             "s".startsWith("s");
             $.error("myErr:"+e.message);
             }catch(e){
             ctp.core.log.err("my", e.message);
             }*/
            var h;
			

			
            function go(){

                var panel=new ctp.ui.panel({
			  	    title: 'toolbar实例',
			  	    collapsible: true,
			     	width: "auto",
			     	height: "auto",
			    	renderTo: 'body'
			     });
				 
				 var panel1=new ctp.ui.panel({
			  	    title: 'toolbar实例',
			  	    collapsible: true,
			     	width: "auto",
			     	height: "auto",
			    	renderTo: 'hpanel'
			     });
				 
				var jsondata;
				$.ajax({
					url:"data.json",
					async:false,
					dataType:"json",
					success:function(data){
						jsondata=data;
					}
				});
				
                h = new ctp.ui.grid.header({
                    title:        
					//第一行
                    [[{
                        text: "1",rowspan: "4",colspan: "2"
                    }, {
                        text: "2",rowspan: "5"
					}, {
                        text: "3",colspan: "5"
                    }],
					//第二行
                    [{
                        text: "sub1",rowspan: "4"
                    }, {
                        text: "sub2",colspan: "4"
                    }],        
					//第三行
                    [{
                        text: "sub2sub1",colspan: "2",
						width:100
                    }, {
                        text: "sub2sub2",colspan: "2",rowspan: "2"
                    }],        
					//第四行
                    [{
                        text: "sub2sub1sub1"
                    }, {
                        text: "sub2sub1sub2",rowspan: "2"
                    }],        
					//第五行
                    [{
                        text: "1-1"
                    }, {
                        text: "1-2",
						width:100
                    }, {
                        text: "sub2sub1sub1sub1"
                    }, {
                        text: "sub2sub2sub1"
                    }, {
                        text: "sub2sub2sub2"
                    }]],
                    
                    attr: {
                        2: {
                            fieldName: "field1",
							sortable:false
                        },
                        3: {
                            fieldName: "field3",
							dataType:"num"
                        }
                    },
                    
                    dataType: ""
                });
                
                
                t = new ctp.ui.grid({
                    id: "tbl",
                    header: h,
					dataSource:jsondata,
                    title: "Grid Sample",
					width:"469px",
					height:"250px",
					renderTo:"hpanel"
                })
                
				
				h1 = new ctp.ui.grid.header({
                    title:        
					//第一行
                    [[{
                        text: "中文表头1"
                    }, {
                        text: "中文表头-2"
                    }, {
                        text: "h1-3"
                    }, {
                        text: "h1-4"
                    }, {
                        text: "h1-5"
                    }]],
                    
                    attr: {
                        2: {
                            fieldName: "field1",
							sortable:false
                        },
                        3: {
                            fieldName: "field3",
							dataType:"number"
                        }
                    },
                    
                    dataType: ""
                });
                
                
                t1 = new ctp.ui.grid({
                    id: "tbl1",
                    header: h1,
					dataSource:jsondata,
                    title: "Grid Sample1",
					width:"100%",
					renderTo:"hpanel"
                })
				
				
				h2 = new ctp.ui.grid.header({
                    title:        
					//第一行
                    [[{
                        text: "h1-1"
                    }, {
                        text: "h1-2"
                    }, {
                        text: "h1-3"
                    }]],
                    
                    attr: {
						1:{
							fieldType:"select"
						},
                        2: {
                            fieldName: "field1",
							fieldType: "textfield"
							
                        },
                        3: {
                            fieldName: "field3",
                            sortable: false
                        }
                    },
                    
                    dataType: ""
                });

                
                t2 = new ctp.ui.grid({
                    id: "tbl2",
                    header: h2,
					dataSource:jsondata,
                    title: "Grid Sample2",
					renderTo:$("#test")
                });
				
				toolbar1=new ctp.ui.toolbar({
			  	           	id : 'toolbar1',			
				            border : 'bottom',			
                            items :[{
                                      type : 'button',
                                      text : '新增',
                                      bodyStyle : 'add',
                                      useable : true,
                                      handler : function(){			                             
                                      }
                                     },'-',{
                                       type : 'button',
                                       text : '修改',
                                       bodyStyle : 'edit',
                                       useable : true,
                                       handler : function(){			                        
                                       }
									 },'-',{
                                       type : 'button',
                                       text : '保存',
                                       bodyStyle : 'save',
                                       useable : true,
                                       handler : function(){			                        
                                       }
									 }]
									 ,renderTo:""
									 })
                //x = new ctp.ui.grid.header("1");
                $("#my").height(50);
				
//可编辑
				
				
		

	

				/*
var checkbox1=new ctp.ui.checkbox({
			  	    id: 'checkbox1', 
			  	    label: '', 
			     	value: 'checkbox1',
			     	checked: false,
					disabled: false
					});
*/
            }
        </script>
    </head>
    <body onload="go()">
        
        <hr/>
        
		
		<div id="test" style="background-color:transparent;"></div>
		
		
		<div id="rs"></div>
		<button onclick ="t2.jsonSubmit();">提交</button>
		
		<ctp:form name="submitJsonForm" method="post" action="/icbc/ctpdemo/menumgmt.flowc"
		flowActionName=”updateorder”>
			
		</ctp:form>

    </body>
</html>
